<template>
    <div class="ls-goods">
        <el-form inline :model="formInline" class="uiwu-form-inline">
            <el-form-item label="创建时间">
                <el-date-picker
                    value-format="yyyy-MM-dd"
                    range-separator="至"
                    v-model="formInline.creationTime"
                    type="daterange"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    @change="changePicker"
                />
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select placeholder="请选择" v-model="formInline.status">
                    <el-option label="申请中" value="1"></el-option>
                    <el-option label="已同意" value="2"></el-option>
                    <el-option label="已拒绝" value="3"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-input
                    v-model="formInline.keyword"
                    clearable
                    placeholder="请输入售后单号/用户昵称/手机号码搜索"
                    style="width: 400px"
                />
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="searchQuery">查询</el-button>
                <el-button @click="resetQuery">重置</el-button>
                <el-button @click="exportOrder">导出</el-button>
            </el-form-item>
        </el-form>
        <el-table v-loading="showLoading" :data="tableData" style="width: 100%">
            <el-table-column prop="sn" label="售后单号" align="center" />
            <el-table-column prop="avatar" label="用户头像" align="center">
                <template #default="{ row }">
                    <el-image
                        :src="row.avatar"
                        style="width: 70px; height: 70px"
                        :preview-src-list="[row.avatar]"
                    ></el-image>
                </template>
            </el-table-column>
            <el-table-column prop="store_name" label="昵称" align="center" />
            <el-table-column prop="store_mobile" label="手机号码" align="center" />
            <el-table-column prop="refund_type_desc" label="售后类型" align="center" />
            <el-table-column prop="refund_total_amount" label="售后金额" align="center" />
            <el-table-column prop="status_desc" label="订单状态" align="center" />
            <el-table-column prop="create_time" label="创建时间" align="center" />
            <el-table-column width="180" label="操作" align="center">
                <template #default="{ row }">
                    <el-button type="text" @click="openWindow(row)">详情</el-button>
                    <el-button type="text" v-if="row.status == 1" @click="auditing(row)">审核</el-button>
                </template>
            </el-table-column>
        </el-table>
        <div class="uiwu-pagination">
            <el-pagination
                background
                layout="total, prev, pager, next, jumper"
                hide-on-single-page
                :total="totals"
                :current-page="currentPage4"
                :page-size="10"
                @size-change="handleSizeChange"
                @current-change="handleSizeChange"
            />
        </div>
        <el-dialog :visible.sync="dialogVisible" draggable title="退款审核" width="500px" @close="radioType = ''">
            <el-form label-position="left">
                <el-form-item label="审核结果" label-width="120">
                    <el-radio-group v-model="radioType">
                        <el-radio label="1">同意退款</el-radio>
                        <el-radio label="2">拒绝退款</el-radio>
                    </el-radio-group>
                </el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="confirmPrice(orderItem)"> 确定 </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { apiAfterSaleLists, apiAfterSaleAgree, apiAfterSaleRefuse } from '@/api/order/order'
@Component({
    components: {}
})
export default class AfterSales extends Vue {
    radioType = ''
    showLoading = false
    tableData: any[] = []
    totals = 0
    formInline: any = {
        creationTime: null,
        keyword: '',
        start_time: null,
        end_time: null,
        status: null
    }
    dialogVisible = false
    currentPage4 = 1
    orderItem: any = null
    change_price: any = ''

    /**
     * changePicker时间选择回调
     * @param e 回调选中的时间内容
     */
    changePicker(e: any) {
        this.formInline.start_time = null
        this.formInline.end_time = null
        if (e) {
            this.formInline.start_time = e[0]
            this.formInline.end_time = e[1]
        }
    }
    /**
     * searchQuery 筛选
     */
    searchQuery() {
        this.currentPage4 = 1
        this.getapiAfterSaleLists()
    }
    /**
     * resetQuery 重置筛选条件
     */
    resetQuery() {
        this.currentPage4 = 1
        this.formInline = {
            creationTime: null,
            keyword: '',
            start_time: null,
            end_time: null,
            status: null
        }
        this.getapiAfterSaleLists()
    }
    /**
     * handleSizeChange 分页页数切换
     * @param e 选择的页数
     */
    handleSizeChange(e: any) {
        this.currentPage4 = e
        this.getapiAfterSaleLists()
    }
    /**
     * openWindow 查看详情
     * @param row 订单数据
     */
    openWindow(row: any) {
        this.$router.push({
            name: 'after_sales_detail',
            query: {
                id: row.id
            }
        })
    }
    /**
     * auditing 审核弹窗
     * @param row 订单参数
     */
    auditing(row: any) {
        this.dialogVisible = true
        this.orderItem = row
    }
    async confirmPrice(row: any) {
        if (!this.radioType) {
            return this.$message.error('请选择审核结果')
        }
        if (this.radioType == '1') {
            await apiAfterSaleAgree({ id: row.id })
        } else {
            await apiAfterSaleRefuse({ id: row.id })
        }
        this.getapiAfterSaleLists()
        this.radioType = ''
        this.dialogVisible = false
    }
    /**
     * apiAfterSaleLists 获取售后列表
     */
    async getapiAfterSaleLists() {
        const postData = JSON.parse(JSON.stringify(this.formInline))
        delete postData.creationTime
        const { count, lists } = await apiAfterSaleLists({
            page_size: 10,
            page_no: this.currentPage4,
            ...postData
        })
        this.tableData = lists
        this.totals = count
    }
    /**
     * exportOrder 订单导出
     */
    async exportOrder() {
        const postData = JSON.parse(JSON.stringify(this.formInline))
        delete postData.creationTime
        await apiAfterSaleLists({
            export: 2,
            ...postData
        })
    }
    created() {
        this.getapiAfterSaleLists()
    }
    activated() {}
}
</script>

<style lang="scss" scoped>
.uiwu-form-inline {
    background-color: #fff;
    margin-bottom: 16px;
    padding: 16px;
    padding-bottom: 0;
}
.uiwu-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    padding: 16px 0;
}
::v-deep .el-date-editor .el-range-separator {
    width: 6%;
}
::v-deep .el-input-number .el-input__inner {
    text-align: left;
}
</style>
